<%--
  Created by IntelliJ IDEA.
  User: 25498
  Date: 2021/11/30
  Time: 17:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" import="model.User" %>
<%@ page import="service.UserService" %>
<%@ page import="java.util.List" %>
<html>
<head>
    <title>个人信息</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <%--    <script src="../js/bootstrap.min.js"></script>--%>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
        body{
            margin: 0 10px 0 10px;
            padding: 0;
            height: 100%;
        }
        .form_body{
            display: flex;
            justify-content: flex-start;
            padding: 20px;
        }
        .form_item{
            width: 20%;
        }
        td,th{
            text-align: center;
        }
    </style>
</head>
<body>
<%--    管理员搜索表单--%>
    <form  role="form" method="post" action="#">
        <div class="form_body">
            <div class="form_item">用户名：<input type="text" name="name" id="name" autocomplete="off" required=""></div>
<%--            <div class="form_item">电话号码：<input type="text" name="tel" autocomplete="off" ></div>--%>
            <input type="submit" value="查询" name="query">
            <button><a href="userInfo.jsp">返回</a></button>
        </div>
    </form>
<%--    管理员信息表格--%>
    <table class="table table-bordered table-hover" style="width: 100%">
    <%--    <caption>边框表格布局</caption>--%>
        <thead>
        <th>ID</th>
        <th>用户名</th>
        <th>密码</th>
        <th>邮箱</th>
        <th>真实姓名</th>
        <th>电话号码</th>
        <th>性别</th>
        <th>出生日期</th>
        <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <% request.setCharacterEncoding("utf-8");%>
        <%
            String name = request.getParameter("name");
            UserService service = new UserService();
            List<User> userList;
            userList = service.queryUserList(name);
            int i = 0;
            for(User user:userList){
        %>
        <tr>
            <td><%=++i%></td>
            <td><%=user.getUser_name()%></td>
            <td><%=user.getUser_password()%></td>
            <td><%=user.getEmail()%></td>
            <td><%=user.getReal_name()%></td>
            <td><%=user.getTel()%></td>
            <td><%=user.getSex()%></td>
            <td><%=user.getDate_birth()%></td>
            <td>
                <button data-toggle="modal" data-target="#myModal" id="<%=user.getUser_name()%>" class="update">
                    修改
                </button>
                <button><a href="../deleteUser?name=<%=user.getUser_name()%>" style="color: #000000">删除</a></button></td>
            </td>
        </tr>
        <%}
        %>
        </tbody>
    </table>
<%--    修改弹出层（modal）--%>
    <%
        User user = new User();
    %>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="">
                        修改管理员信息
                        <%=user.getUser_name()%>
                    </h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" role="form" action="../updateUser" method="post">
                        <div class="form-group">
                            <label for="firstname" class="col-sm-4 control-label color-white">用户名</label>
                            <div class="col-sm-6">
                                <input type="text" class="form-control" id="firstname" name="name" placeholder="请输入用户名" value="" autocomplete="off" disabled>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="lastname" class="col-sm-4 control-label color-white">密码</label>
                            <div class="col-sm-6">
                                <input type="text" class="form-control" id="lastname" name="password" placeholder="请输入密码" autocomplete="off" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="lastname" class="col-sm-4 control-label color-white">Email</label>
                            <div class="col-sm-6">
                                <input type="text" class="form-control" name="Email"  placeholder="请输入Email" autocomplete="off" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="lastname" class="col-sm-4 control-label color-white">姓名</label>
                            <div class="col-sm-6">
                                <input type="text" class="form-control" name="real_name"  placeholder="请输入真实姓名" autocomplete="off" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="lastname" class="col-sm-4 control-label color-white">手机号</label>
                            <div class="col-sm-6">
                                <input type="text" class="form-control" name="tel"  placeholder="请输入手机号" autocomplete="off" required>
                            </div>
                        </div>
                        <div class="form-group color-white">
                            <label for="lastname" class="col-sm-4 control-label">性别</label>
                            <label class="radio-inline" style="margin-left: 15px">
                                <input type="radio" name="sex" value="男" checked> 男
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="sex" value="女"> 女
                            </label>
                        </div>
                        <div class="form-group">
                            <label for="lastname" class="col-sm-4 control-label color-white">出生日期</label>
                            <div class="col-sm-6">
                                <input type="date" class="form-control" name="date_birth"  placeholder="请输入日期">
                            </div>
                        </div>
                        <div class="modal-footer" style="text-align: center">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                            </button>
                            <input type="submit" class="btn btn-primary" value="提交修改" />
                        </div>
                    </form>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
<script>
    $(document).ready(function(){
        $(".update").click((e) => {
            let v_id=e.target.id;
            $("#firstname").val(v_id);
            console.log(v_id);
        })
    });
</script>
</body>
</html>
